<template>
	<div class="pages" ref="UI">
		<baseBack @font='font'></baseBack>


		<div style="padding: 20px 150px;" class="flex">
			<div style="width: 300px;" v-if="options.txt!=='错题库'">
				<div style="background: #EBF1FF;text-align: center;padding: 25px 0;">
					<div class="u-font-20  sss">理论速成</div>
					<div class="u-font-30 u-margin-top-20">第001号考台</div>
				</div>
				<div style="padding: 25px ;background: #EBF1FF;margin-top: 40px;text-align: center;">
					<div class="u-font-20">考生信息</div>
					<div class="" style="margin: 20px 0;">
						<img :src="config.systemLogo" style="width: 80px;height: 80px;border-radius: 50%;" />
					</div>
					<div class="u-font-20 flex ">
						<div class="e-color-i-1" style="width: 100px;text-align: left;">考生姓名:</div>
						<div>{{user.realname}}</div>
					</div>
					<div class="u-font-20 u-margin-top-20 flex">
						<div class="e-color-i-1 " style="width: 100px;text-align: left;">考试车型:</div>
						<div>{{carTypeParams.carObject.name}}</div>
					</div>
					<div class="u-font-20 u-margin-top-20 flex">
						<div class="e-color-i-1" style="width: 100px;text-align: left;">考试科目:</div>
						<div>{{options.subject}}</div>
					</div>
				</div>

				<div style="height: 84px;background: #EBF1FF;margin-top: 41px;text-align: center;">

					<div style="font-size:15px;padding-top: 15px;">剩余时间</div>
					<div style="font-size: 20px;margin-top: 10px;">
						<baseCountDown @end='end' ref='CountDown'></baseCountDown>
					</div>

				</div>
			</div>

			<div style="margin-left: 20px;">

				<div v-for="(item,index) in list" :key="index" v-if="current==index">
					<div class="flex">
						<div style="width:880px;">
							<div style="background: #F7F7F7; padding:50px;height: 312px;">
								<div class="" style="position: relative;">
									<div style="position: absolute;top: 0px;display: flex;align-items: center;">
										<!-- <span
											class="block">{{item.type==1?'单选题':item.type==2?'多选题':item.type==3?'判断':''}}</span> -->
										<span class="u-font-weight "
											:style="{fontSize:fontSize*0.7+'px',color:item.type==2?'red':'#333'}">{{current+1}}.</span>
									</div>
									<div :class="'rich'+index" class="u-font-weight " v-html="item.title"
										:style="{textIndent:current>98?'75px':'55px',fontSize:fontSize*0.7+'px',color:item.type==2?'red':'#333'}">
									</div>
								</div>
								<div @click="openSort(item,index1)" v-for="(item1,index1) in item.options" :key="index1"
									class="flex u-margin-top-20 "
									:style="{fontSize:fontSize*0.7+'px',color:item.type==2?'red':'#333'}"
									style="cursor:pointer;">
									<div class="u-margin-right-20">
										<div v-if="item.type==3" style="font-size: 18px;">
											{{item1.sort=='A'?'√':'×'}}
										</div>
										<div v-else>
											{{item1.sort}}
										</div>

									</div>
									<div v-html="item1.content"></div>
								</div>
							</div>

							<div v-if="item.answer && isanwers && ( options.txt=='精选题库' || options.txt=='错题库')"
								class="u-margin-top-20 e-color-d-1 u-font-30 u-font-weight">
								标准答案:{{item.answer}}
							</div>

							<div class="flex flex-row-between u-font-26 u-margin-top-40">
								<div>您的选择答案是:
									<span v-if="item.resultInfo">
										<span v-if="item.type==3" >
											{{item.resultInfo.result=='A'?'√':'×'}}
										</span>
										<span v-else>
											{{item.resultInfo.result}}
										</span>
									</span>
								</div>
								<div class="flex">
									<div>选项：</div>
									<div :class="item1.isChange?'changes':''" @click="Cask(item1,index1)"
										class="selectblock" v-for="(item1,index1) in item.options" :key="index1">

										<div v-if="item.type==3">
											{{item1.sort=='A'?'√':'×'}}
										</div>
										<div v-else @click="" style="cursor:pointer;">
											{{item1.sort}}
										</div>
									</div>

									<el-button @click="tijiao" v-if="!item.isRead && item.type==2" type='success'>确认
									</el-button>
								</div>
							</div>
							<div>

							</div>

						</div>

						<div class="u-margin-left-20">
							<ul class="table">
								<li v-for="(item,index) in list" @click="current=index"
									:style="{background:current==index?'#0ad0be':''}" style="font-size: 5px;">
									<p :style="{color:current==index?'#fff':'#333'}" style="margin: 2px 0 0 2px;">
										{{index+1}}
									</p>
									<p style="text-align: center;transform: scale(0.7);" v-if="item.resultInfo"
										:class="item.resultInfo?item.resultInfo.pass==0?'success':item.resultInfo.pass==1?'default':'':''">
										<span v-if="item.type==3" style="font-size: 18px;">
											{{item.resultInfo.result=='A'?'√':'×'}}
										</span>
										<span v-else style="">
											{{item.resultInfo.result}}
										</span>
									</p>
								</li>
							</ul>
						</div>

					</div>
					<div v-if="item.isjiqiao " class="u-margin-top-20 u-font-20  flex">
						<div>技巧解析：</div>
						<div v-html="item.parse" style="display: inline-block;max-width:90%;"></div>
					</div>

					<div style="background: #EBF1FF; padding:20px;margin-top: 45px;" class="flex flex-col-center">
						<div class="u-flex-1.5">
							<div class="flex " style="align-items: center;">
								<div style="color: #008EFF;margin-right: 20px;"
									v-if="AccuracyTxt &&  options.txt!=='错题库'">
									正确率：{{AccuracyTxt}}%
								</div>
								<div class="controls" @click="collect(item)">
									<i :style="{color:!item.isCollect?'':'#ff7070'}" style="font-size:22px;"
										:class="!item.isCollect?'el-icon-star-off':'el-icon-star-on'"> </i>
									<span :style="{color:!item.isCollect?'':'#ff7070'}"
										class="u-margin-left-20">收藏</span>
								</div>
								<div v-if="options.txt=='精选题库' || options.txt=='错题库' " class="controls"
									@click="controls(1)"
									:style="{border:controlIndex==1?'1px solid #38A5FD':'1px solid #333'}">
									<img :src="controlIndex==1? require('@/assets/images/ask_s_1.png'):  require('@/assets/images/ask_1.png')"
										style="width: 15px;height: 22px;"></img>
									<span class="u-margin-left-20"
										:style="{color:controlIndex==1?'#38A5FD':'#333'}">技巧</span>
								</div>
								<div class="controls" @click="controls(2)"
									v-if="options.txt=='精选题库' || options.txt=='错题库'"
									:style="{border:controlIndex==2?'1px solid #38A5FD':'1px solid #333'}">
									<img :src="controlIndex==2? require('@/assets/images/ask_s_2.png'):require('@/assets/images/ask_2.png') "
										style="width: 19px;height: 19px;"></img>
									<span class="u-margin-left-20"
										:style="{color:controlIndex==2?'#38A5FD':'#333'}">语音</span>
								</div>
								<div v-if="options.txt=='精选题库' || options.txt=='错题库'" class="controls"
									@click="controls(3)"
									:style="{border:controlIndex==3?'1px solid #38A5FD':'1px solid #333'}">
									<img :src="controlIndex==3?require('@/assets/images/ask_s_3.png'):require('@/assets/images/ask_3.png')"
										style="width: 18px;height: 18px;"></img>
									<span class="u-margin-left-20"
										:style="{color:controlIndex==3?'#38A5FD':'#333'}">视频</span>
								</div>
							</div>
						</div>
						<div class="u-flex-1">
							<template v-if="options.txt=='精选题库' || options.txt=='错题库'">
								<el-checkbox v-model="isanwers" v-if="options.txt=='精选题库' || options.txt=='错题库'">是否显示答案
								</el-checkbox>
								<el-checkbox v-model="isnext">是否自动下一题</el-checkbox>
							</template>
						</div>
						<div class="u-flex-1 flex " style="justify-content: flex-end;">
							<div style="width: 300px;" class="flex flex-row-between">
								<el-button @click="btn('pre')"
									v-if="options.txt=='精选题库' || options.txt=='错题库' || options.txt=='模拟考试'">上一题
								</el-button>
								<el-button @click="btn('next')">下一题</el-button>
								<el-button @click="complete" v-if="options.txt!=='错题库'"> 交卷</el-button>
							</div>
						</div>

					</div>

					<div style="margin: auto;text-align: center;position: relative;right:160px;"
						class="u-margin-top-20 " v-if="item.image">
						<el-image :src="item.image" :preview-src-list="[item.image]">
						</el-image>
					</div>


					<!-- <div v-if="controlIndex==3 && item.video " class="u-margin-top-20 u-font-20">
						<video  controls style="width: 400px;height: 400px;">
							<source :src="video">
						</video>
					</div> -->



				</div>



				<audio id="successpay" autoplay="autoplay" />

			</div>

		</div>
		<!-- <video ref="video" controls controlslist="nodownload"
 preload="none" width="100%" height="100%" :poster="item.img" :src="item.mp4_url">
 </video> -->

		<el-dialog v-dialogDrag :visible.sync="VideoShow" width="50%" :before-close="VideoClose">
			<video controls style="width: 100%;height: 400px;" id="video" :src="video">
				<!-- <source :src="video"> -->
			</video>
		</el-dialog>

		<gradeDialog :dialogVisible='gradeShow' :typeTxt='options.txt' :list='list'></gradeDialog>


	</div>
</template>

<script>
	import {

		mapState,

		mapMutations

	} from 'vuex';
	import gradeDialog from './components/gradeDialog.vue';
	export default {
		components: {
			gradeDialog
		},
		data() {
			return {

				fontSize: '',
				AccuracyTxt: '',
				VideoShow: false,
				gradeShow: false,
				isanwers: false,
				isnext: false,
				AUDIO: '',
				controlIndex: '',
				current: 0, //当前题目
				user: {},
				config: {},
				options: this.$store.state.pageParams,
				list: [],
				video: ''

			}
		},
		watch: {

			checkAskObject: {
				immediate: true,
				handler(v) {
					// var title=v.ask[v.swiperIndex].title;
					if (this.options.txt == '错题库') {
						if (v.ask.length) {
							let askObject = v.ask[v.swiperIndex];
							let result = v.ask[v.swiperIndex].resultArr;
							let answers = v.ask[v.swiperIndex].answerArr;
							// answers.forEach(item1 => {
							// 	askObject.options.filter(item => item.sort == item1)[0].isReal = 1; //找出正确答案 
							// })
							result.forEach(item1 => {
								var arr = askObject.options.filter(item => item.sort == item1)[0];
								console.log(arr, "arr")
								if (!arr.isChange) {
									arr.isChange = true
								}
							})

							// 添加答案
							askObject.resultInfo = askObject;



							askObject.isRead = true;
							this.$forceUpdate()
						}
					}
				}
			}
		},
		computed: {
			...mapState(['font', "carTypeParams", 'pageParams']),
			checkAskObject() {
				return {
					swiperIndex: this.current,
					ask: this.list
				}
			},
		},
		created() {
			this.$nextTick(() => {
				// 禁用右键
				document.oncontextmenu = new Function("event.returnValue=false");
				// 禁用选择
				document.onselectstart = new Function("event.returnValue=false");
			});
			this.getInfomation()
			this.getconfig()

			if (this.options) {
				this.jiazai()
				this.gettime()
			}


		},
		mounted() {
			this.fontSize = this.font
		},
		methods: {
			openSort(e, index) {
				let askObject = this.list[this.current];
				if (e.keywords.length && askObject.resultInfo ) {
					
					e.keywords.forEach(item1 => {
						let reg = new RegExp(item1, "ig");
						e.options[index].content = e.options[index].content.replace(reg, '<span style="color:' + (
							e.type == 2 ? '#333' : 'red') + ';font-size:' + (this
							.fontSize * 0.8) + 'px"  class=" flash" >$&  </span>');
					})
					// // 添加答案
					// askObject.options = e;
				}

				// e.options.forEach(item => {
				// 	console.log(item,77)
				// 		// e.keywords.forEach(item1 => {
				// 		// 	let reg = new RegExp(item1, "ig");
				// 		// 	item.content = item.content.replace(reg, '<span style="color:' + (
				// 		// 		e.type == 2 ? '#333' : 'red') + ';font-size:' + (this
				// 		// 		.fontSize * 0.8) + 'px"  class=" flash" >$&  </span>');
				// 		// })
				// 	})
			},
			collect(e) {
				this.axios.post("/user/collect", {
					id: this.options.txt == '收藏库' ? e.questionId : e.id
				}).then(res => {
					this.$set(e, 'isCollect', !e.isCollect)
				}).catch(error => {})
			},
			checkAccuracy() {
				let ask = this.list;
				let realNum = 0;
				let lengthNum = 0;
				ask.forEach(item => {
					if (item.resultInfo) {
						if (item.resultInfo.pass) {
							realNum++
						}
						if (item.resultInfo) {
							lengthNum++
						}
					}
				})

				this.AccuracyTxt = ((realNum / lengthNum) * 100).toFixed(2)
			},
			gettime() {
				if (this.options.txt == '错题库') return
				this.axios.post("/index/testConfig", {
					id: this.options.subjectId,
				}).then(res => {
					this.$refs.CountDown.seconds = res.timeLong * 60
				}).catch(error => {})
			},

			Cask(item, index) {
				let askObject = this.list[this.current];
				// 已读
				if (askObject.isRead) return;
				// 高亮
				this.$set(item, "isChange", !item.isChange);
				// 已选答案
				let result = askObject.options.filter(item => item.isChange).map(item1 => {
					return item1.sort
				});
				if (askObject.type == 1 || askObject.type == 3) {
					this.sure(result)
				}
			},

			// 多选提交
			tijiao() {
				let result = this.list[this.current].options.filter(item => item.isChange).map(item1 => {
					return item1.sort
				});

				this.sure(result)
			},
			sure(result) {
				let askObject = this.list[this.current];
				this.axios.post('/user/answer', {
					type: this.options.txt == '模拟考试' ? 1 : 2,
					id: askObject.id,
					options: askObject.options,
					result: result.join(','),
					exercise_num: this.current,
					cate_id: this.options.id
				}).then(res => {
					let answers = res.answers;
					if (!res.pass) {
						let parse = askObject.title;
						let options = askObject.options;
						let keywords = res.keywords;
						keywords.forEach(item => {
							let reg = new RegExp(item, "ig");
							parse = parse.replace(reg, '<span style=" color: ' + (res.type == 2 ? '#333' :
									'red') + ';font-size:' + (this.fontSize * 1.5) +
								'px"  class=" flash" >$&  </span>');
						})
						// options.forEach(item => {
						// 	keywords.forEach(item1 => {
						// 		let reg = new RegExp(item1, "ig");
						// 		item.content = item.content.replace(reg, '<span style="color:' + (
						// 			res.type == 2 ? '#333' : 'red') + ';font-size:' + (this
						// 			.fontSize * 0.8) + 'px"  class=" flash" >$&  </span>');
						// 	})
						// })
						askObject.isjiqiao = true

						askObject.options = options
						askObject.title = parse

						// parse.replace(/大型/ig,"<span style='color: red;font-size:20px' class='flash'>$&</span>")

						// console.log(parse,"parse")


						//如果答错
						// answers.forEach(item1 => {
						// 	askObject.options.filter(item => item.sort == item1)[0].isReal = 1; //找出正确答案 
						// })
						// result.forEach(item1 => {
						// 	var arr = askObject.options.filter(item => item.sort == item1)[0];
						// 	if (!arr.isReal) {
						// 		arr.isReal = 2
						// 	}
						// })
						// this.mistakeNum++
					} else {

						// // 如果答对了
						// askObject.options.filter(item => item.sort == result)[0].isReal = 1;
						// this.correctNum++
					};
					// 添加答案
					askObject.resultInfo = res;
					this.$nextTick(() => {
						askObject.isRead = true;
					})

					if (this.list.length > this.current + 1 && this.isnext) {
						this.current++
					}

					this.checkAccuracy()

					this.$forceUpdate()
				}).catch(err => {

				})
			},
			btn(e) {
				if (e == 'pre') {
					if (!this.current) return;
					this.current--
				}
				if (e == 'next') {
					if (this.list.length > this.current + 1) {
						this.current++
					}
				}
			},
			end() {
				this.gradeShow = true;
			},
			complete() {
				this.gradeShow = true;
			},
			jiazai() {
				if (this.options.txt == '收藏库') {
					this.axios.post("/user/collectList", {}).then(res => {
						this.list = res;
					}).catch(error => {})
				}
				if (this.options.txt == '精选题库') {
					this.axios.post("/user/question", {
						test_paper_id: this.options.id,
						subject: this.options.subjectId,
						car_type: this.options.carId,
					}).then(res => {
						res.forEach(item => item.isRead = false);
						this.list = res;
					}).catch(error => {})
				}
				if (this.options.txt == '模拟考试') {
					this.axios.post("/user/question", {
						subject: this.options.subjectId,
						car_type: this.options.carId,
					}).then(res => {
						res.forEach(item => item.isRead = false);
						this.list = res;
					}).catch(error => {})
				}
				if (this.options.txt == '错题库') {
					this.axios.post("/user/examMistake", {
						id: this.pageParams.id
					}).then(res => {
						res.forEach(item => item.isRead = false);
						this.list = res;
					}).catch(error => {})
				}
			},

			getInfomation() {
				this.axios.post("/user/information", ).then(res => {
					this.user = res;
				}).catch(error => {})
			},
			getconfig() {
				this.axios.post("/index/getConfig", ).then(res => {
					this.config = res;
				}).catch(error => {})
			},
			controls(e) {
				let askObject = this.list[this.current];

				if (e == 1) {
					this.$set(askObject, 'isjiqiao', !askObject.isjiqiao)
					this.audio(askObject.parseAudio, this.controlIndex, e)
					return
				}
				if (e == 2) {
					this.audio(askObject.titleAudio, this.controlIndex, e)
					return
				}
				if (e == 3) {
					if (!askObject.video) {
						this.$message({
							showClose: true,
							message: '暂无视频',
							type: 'warning'
						});
						return
					}
					console.log(askObject, 'askObject')
					this.$nextTick(() => {

						this.video = askObject.video;
						this.VideoShow = true
					})

				}

			},
			audio(Audio, ing, index) {
				if (ing) {
					this.AUDIO.pause();
					this.controlIndex = ''
					return;
				}
				this.AUDIO = document.getElementById('successpay');
				this.AUDIO.src = Audio;
				this.controlIndex = index;
				this.AUDIO.play();
				this.AUDIO.onended = () => {
					this.controlIndex = ''
				};

			},
			VideoClose() {
				this.VideoShow = false;
				let myVideo = document.getElementById('video') //对应video标签的ID
				myVideo.pause()

			}


		}
	}
</script>

<style lang="scss">
	.blockss {
		height: 45px;
		line-height: 45px;
		min-width: 90px;
		text-align: center;
		background: #38A5FD;
		color: #fff;
		font-size: 20px;
		border-radius: 10px;
		margin-right: 20px;
		display: inline-block;
		cursor: pointer;
	}

	.controls {

		border-radius: 10px;
		border: 1px solid #333333;
		text-align: center;
		margin-right: 20px;
		display: flex;
		align-items: center;
		padding: 10px 15px;
		cursor: pointer;
	}

	.selectblock {
		width: 36px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		margin-right: 10px;
		border: 1px solid #707070;
		cursor: pointer;
	}


	.changes {
		background: #3CB4FE;
		border: 1px solid #3CB4FE;
		color: #fff;
	}

	.table {
		display: flex;
		flex-wrap: wrap;
		width: 420px;

	}


	.table li {
		width: 9%;
		height: 40px;
		border: 1px solid #666;
		margin-left: -1px;
		margin-bottom: -1px;
		cursor: pointer;
	}


	.default {
		color: #333;
	}

	.success {
		color: #FE3C3C;
	}


	.flash {
		animation: breath 1s linear infinite;
	}


	@keyframes breath {

		/* 动画开始时的不透明度 */
		from {
			opacity: 0.1;
			transform: scale(2);
		}

		/* 动画50% 时的不透明度 */
		50% {
			opacity: 1;

		}

		/* 动画结束时的不透明度 */
		to {
			opacity: 0.1;
		}
	}
</style>
